<template>
	<view class="page">
		<view class="loading" v-if="isSend">
			<image class="loading-icon" src="../../../static/chat1.png" mode=""></image>
		</view>
		<scroll-view style="height: 100%;" scroll-y="true" scroll-into-view="bottom" class="scroll">
			<view class="msglist">
				<view v-for="(item, index) in licationList" :key="index">
					<!-- User message -->
					<view class="msgItem self">
						<view class="tex">{{ item.content }}</view>
						<image class="logo" src="../../../static/yytx.png" mode=""></image>
					</view>
					<!-- AI response -->
					<view class="msgItem others">
						<view style="display: flex; align-items: center;">
							<image class="logo" src="../../../static/yytx.png" mode=""></image>
							<view class="name">AI机器人</view>
						</view>
						<view class="tex" v-if="item.showText">{{ item.typedText }}</view>
						<view class="tex" v-else>{{ item.returnContent }}</view>
					</view>
				</view>
				<view id="bottom" style="height: 1px;"></view>
			</view>
		</scroll-view>
		<view class="foot">
			<input v-model="description" @input="inputValue" type="text" placeholder="请输入您的问题……"
				placeholder-style="color: #D3D3D3;">
			<image v-if="isShow" @click="send" src="../../../static/chat2.png" mode=""></image>
			<image v-else src="../../../static/chat2.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				platformId: '',
				description: '',
				aiType: '',
				isSend: false,
				licationList: [],
				isShow: false
			}
		},
		beforeDestroy() {
			// 在组件销毁前清除定时器，避免内存泄漏
			clearInterval(this.intervalId);
		},

		onLoad(options) {
			uni.setNavigationBarTitle({
				title: options.value
			})
			if (options.value === 'GPT3.5') {
				this.aiType = 'gpt3.5'
			} else if (options.value === 'GPT4.0') {
				this.aiType = 'gpt4.0'
			} else {
				this.aiType = options.value
			}
			this.platformId = options.platformId;
			this.getApplicationHistorys();
		},

		methods: {
			scrollToBottom() {
				// 在组件挂载后滚动到底部  
				this.$nextTick(() => {
					const bottom = this.$el.querySelector('#bottom');
					bottom.scrollIntoView({
						behavior: 'smooth'
					});
				});
			},
			inputValue(e) {
				if (e.detail.cursor > 0) {
					this.isShow = true
				}
			},
			startTyping(index, text) {
				clearInterval(this.intervalId);
				let currentIndex = 0;
				const typingSpeed = 100; // 打字速度，单位：毫秒
				this.licationList[index].typedText = '';
				this.licationList[index].showText = true;
				this.intervalId = setInterval(() => {
					this.licationList[index].typedText += text[currentIndex];
					currentIndex++;
					if (currentIndex >= text.length) {
						clearInterval(this.intervalId);
					}
				}, typingSpeed);
			},
			/*获取数据*/
			getApplicationHistorys() {
				let self = this;
				self._get('plus/aiuse/aiuse/historyList', {
					pageIndex: 1,
					sortPrice: 0,
					pageSize: 10,
					platformId: this.platformId
				}, function(res) {
					self.licationList = res.data.records.reverse().map(record => ({
						...record,
						isSelf: false,
						showText: false,
						typedText: ''
					}));
					self.scrollToBottom()
				});
			},
			send() {
				this.isSend = true;
				const userMessage = {
					content: this.description,
					returnContent: '',
					isSelf: true,
					showText: false,
					typedText: ''
				};
				this.licationList.push(userMessage);
				const userMessageIndex = this.licationList.length - 1;
				let self = this;
				self._postAIBody('ai/text/generate', {
					description: this.description,
					aiType: this.aiType,
					platformId: this.platformId
				}, function(res) {
					self.isSend = false;
					self.licationList[userMessageIndex].returnContent = res.data;
					self.startTyping(userMessageIndex, res.data);
					self.scrollToBottom()
					self.description = ''
				});
			}
		}
	}
</script>

<style>
	.page {
		background: #F6F6F6;
	}

	.loading {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
	}

	.loading-icon {
		animation: spin 1s infinite linear;
		width: 100rpx;
		height: 100rpx;
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>

<style lang='css' scoped>
	.scroll {
		flex: 1;
	}

	.msglist {
		padding: 60rpx 20rpx 150rpx 20rpx;
		z-index: 99;

		.msgItem {
			margin-bottom: 56rpx;
		}


		.logo {
			width: 70rpx;
			height: 70rpx;
			background: #E3EEEE;
			border-radius: 50%;
		}

		.self {
			display: flex;
			justify-content: flex-end;

			.logo {
				margin-left: 16rpx;
			}

			.tex {
				max-width: 476rpx;
				background: #2168EA;
				border-radius: 16rpx 0rpx 16rpx 32rpx;
				padding: 24rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				word-wrap: break-word;
				word-break: break-all;
			}
		}

		.others {
			.logo {
				margin-right: 16rpx;
			}

			.name {
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
			}

			.tex {
				font-size: 32rpx;
				color: #444444;
				max-width: 476rpx;
				background: #FFFFFF;
				border-radius: 0 16rpx 32rpx 16rpx;
				padding: 24rpx;
				word-wrap: break-word;
				word-break: break-all;
				margin-left: 80rpx;
			}
		}
	}

	.foot {
		position: fixed;
		bottom: 0;
		width: calc(100% - 70rpx);
		padding: 20rpx 24rpx 20rpx 46rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;

		input {
			flex: 1;
			margin-right: 20rpx;
			font-size: 24rpx;
		}

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}
</style>